<template>
  <div>
    <el-breadcrumb separator="/" style="height:30px">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/personList'}">用户列表</el-breadcrumb-item>
      <el-breadcrumb-item>用户看过新闻的列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索结束 -->
      <!-- 列表开始 -->
      <el-button type="success" @click="selectstop('1')">查看正在使用新闻列表</el-button>
      <el-button type="info" @click="selectstop('0')">查看已关闭的新闻列表</el-button>
      <el-tag
        style="float:right;margin-right:500px"
        v-if="queryInfo.state ==1"
        icon="el-icon-bottom"
        type="success"
        effect="dark"
      >正在使用新闻列表</el-tag>
      <el-tag
        style="float:right;margin-right:500px"
        v-if="queryInfo.state ==0"
        icon="el-icon-bottom"
        type="info"
        effect="dark"
      >已关闭的新闻列表</el-tag>
      <el-table ref="multipleTable" :data="pi.list" tooltip-effect="dark" style="width: 100%">
        <el-table-column label="标题图片" width="120">
          <template slot-scope="scope">
            <el-avatar :size="50" :src="scope.row.image_url"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题名" width="180"></el-table-column>
        <el-table-column prop="category.name" label="类别" width="180"></el-table-column>
        <el-table-column label="时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state==1">开始时间:{{scope.row.create_time}}</el-tag>
            <el-tag v-if="scope.row.state==0" type="warning">结束时间:{{scope.row.end_time}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pi.pageNum"
        :page-sizes="[2, 5, 10, 15,20]"
        :page-size="pi.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pi.total"
      ></el-pagination>-->
    </el-card>
  </div>
</template>

<script>
import {selectJournalismByPid} from '../../api'
export default {
  data() {
    return {
      queryInfo: {
        pageNum: 1,
        pageSize: 5,
        state: "1" //默认是查询没有关闭的新闻
      },
      pi: {}
    };
  },
  created() {
      this.selectJournalismByPidFu();
  },
  methods: {
    async selectJournalismByPidFu() {
       let p_id = this.$route.query.p_id;
       let {data} = await selectJournalismByPid(p_id,this.queryInfo);
       this.pi = data.data;
    },
    selectstop(msg) {
      this.queryInfo.state = msg;
      this.selectJournalismByPidFu();
    },
    handleSizeChange(val) {
      this.queryInfo.pageSize = val;
      this.selectJournalismByPidFu();
    },
    handleCurrentChange(val) {
      this.queryInfo.pageNum = val;
      this.selectJournalismByPidFu();
    }
  }
};
</script>

<style>
</style>